<template>
  <!-- spu组件 -->
  <div>
    <!-- 商品三级分类的组件 -->
    <el-card style="margin-bottom: 20px">
      <CategorySelector @changeCategoryId="changeCategoryId" ref="cs" />
    </el-card>
    
    <!-- 展示列表 -->
    <el-card style="margin-bottom: 20px">
      <!-- SPU列表的界面 -->
      <div v-show="!isShowSpuForm">
      <!-- 添加按钮 -->
      <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px" :disabled="!category3Id">添加SPU</el-button>
      <!-- 表格 -->
      <el-table :data="spuInfoList" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <!-- 引入提示信息按钮组件，设置提示内容  FIXME: 注意组件间的传参-->
            <HintButton title="添加SKU" size="mini" type="primary" icon="el-icon-plus"></HintButton>
            <HintButton title="修改SPU" size="mini" type="primary" icon="el-icon-edit" @click="showUpdateSpuForm(row.id)"></HintButton>
            <HintButton title="查看SKU" size="mini" type="info" icon="el-icon-info" style="margin-right:10px"></HintButton>
            <el-popconfirm :title="`您确定要删除${row.attrName}吗?`" @onConfirm="deleteSpu(row.id)">
              <!-- 引入文字提示按钮的组件 -->
              <HintButton title="删除SPU" size="mini" type="danger" icon="el-icon-delete" slot="reference"></HintButton>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="getSpuInfoList"
      :current-page="page"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->,sizes,total"
      :total="total"
      style="text-align: center"
      background
    >
      </el-pagination>
      </div>
      <!-- 增加或者修改spu数据的界面 -->
      <SpuForm :visible.sync="isShowSpuForm" ref="spuForm"></SpuForm>
    </el-card>
  </div>
</template>

<script>
// 引入增加或者修改SPU数据的组件
import SpuForm from '../components/spuForm';
export default {
  name: "Spu",
  components:{SpuForm},
  data() {
    return {
      category1Id:'', //存储一级分类的id
      category2Id:'', //存储二级分类的id
      category3Id:'', //存储三级分类的id
      spuInfoList:[], //存储spu列表数据
      page:1, // 当前页码
      limit:3, // 每页数据的条数
      total: 0, //总的条数
      loading:false, //是否显示加载画面
      isShowSpuForm:false,//是否显示增加或修改SPU页面
      spuId:'',//存储当前spu的id
    }
  },
  methods: {
    // 三级分类组件需要分发的自定义事件-获取spuInfo的列表数据
    changeCategoryId({level,categoryId}) {
      // 判断分类的级别
      if(level === 1){
        // 一级的分类
        this.category1Id = categoryId;
        this.category2Id = null;
        this.category3Id = null;
        this.total = 0;
        this.spuInfoList = [];
      }else if(level === 2){
        // 二级的分类
        this.category2Id = categoryId;
        this.category3Id = null;
        this.total = 0;
        this.spuInfoList = [];
      }else{
        // 三级的分类
        this.category3Id = categoryId;
        // 获取spuInfo的列表数据
        this.getSpuInfoList();
      }
    },
    // 获取spuInfo的列表数据
    async getSpuInfoList(page=1){
      this.page = page;
      const result = await this.$API.spu.getSpuInfoList(page,this.limit,this.category3Id)
      if(result.code!==200){
        // 获取spu的列表数据失败
        this.$message.error('获取spu的列表数据失败了');
        return;
      }
      // 获取spu列表数据成功 更新数据
      const {records,total} = result.data;
      this.total = total;
      this.spuInfoList = records;
    },
    // 删除spu的回调函数
    deleteSpu(spuId){

    },
    // 修改每页显示多少条--limit
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuInfoList(); //重新获取品牌列表
    },
    // 点击修改按钮的回调函数
    showUpdateSpuForm(spuId){
      // 更新spuId
      this.spuId = spuId;
      // 设置修改页面显示出来
      this.isShowSpuForm = true;
      // FIXME: 需要向SPUForm组件传递数据 spuId
      // 通过SpuForm组件对象调用自己的方法的方式,向自己的组件中传递数据---ref
      this.$refs.spuForm.initUpdateData(this.spuId);
    },
  },
};
</script>

<style scoped>
</style>